<template>
  <div>
      <search-head :title="title" :area="area"></search-head>
      <div class="wrap">
        <div class="title">姓名</div>
        <van-search v-model="searchKey" placeholder="请输入搜索关键字"
        left-icon=""
        :clearable="false"
        class="search"
        @search="onSearch"
        @cancel="onCancel"/>
        <span :class="searchKey.trim() ? 'search_btn':'none_btn'" @click="search1">查询</span>
      </div>
      <div class="foot">本服务由咸宁市人社局提供</div>
  </div>
</template>

<script>
import SearchHead from "@/components/SearchHead.vue";
import { Toast } from 'vant';
export default {
    name: "Test",
    components: {
        SearchHead,
    },
    data(){
        return{
            title:'社会流动人员档案查询',
            searchKey:'',
            area:'咸宁市人社局'
        }
    },
    methods:{
        onSearch(val) {
            if(val && val.trim()){
                 this.$router.push({path:'/population_detail',query:{searchKey:val}})
                 Toast('搜索成功');
            }else{
                Toast('请输入搜索关键字');
            }
        },
        search1(){
            // alert('搜索成功'+this.searchKey);
            if(this.searchKey && this.searchKey.trim()){
               this.$router.push({path:'/population_detail',query:{searchKey:this.searchKey}})
            }else{
                Toast('请输入搜索关键字');
            }
        },
        onCancel() {
            Toast('已取消搜索');
        },
    }
}
</script>

<style lang='less'>
.wrap{
    margin: 10px 16px;
    .van-field__body input{
        height: 35px;
    }
    .title{
        margin-left: 13px;
        font-size: 0.94rem;
        color: #606876;
        font-weight: 500;
    }
}
.foot{
    width: 100%;
    position: fixed;
    color: #999999;
    bottom: 20px;
    font-size: 14px;
    text-align: center;
}
.search_btn{
        display: block;
        width: 320px;
        height: 35px;
        background: #3366be;
        text-align: center;
        line-height: 35px;
        color: #fff;
        margin-left: 12px;
        border-radius: 4px;
    }
    .none_btn{
        background: #bec1c5;
        display: block;
        width: 320px;
        height: 35px;
        text-align: center;
        line-height: 35px;
        color: #fff;
        margin-left: 12px;
        border-radius: 4px;
    }
</style>